<template>
  <van-field :label="label" class="field-barcode">
    <template #input>
      <canvas id="canvas" ref="canvas" style="width: 100%; height: 80px"></canvas>
    </template>
  </van-field>
</template>

<script>
import JsBarcode from 'jsbarcode';

export default {
  name: 'FieldBarCode',
  props: {
    label: {
      type: String,
      default: '二维码'
    },
    value: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    }
  },
  // 监听属性
  watch: {
    value: {
      handler (nv, ov) {
        let _this = this
        _this.$nextTick(() => {
          let options = {
            text: this.text || nv,
            displayValue: true,
            fontSize: 12,
            height: 40,
            padding: 0,
            width: 1
          };
          JsBarcode(_this.$refs['canvas'], nv, options);
        })
      },
      immediate: true
    }
  },
  // 渲染执行
  mounted () {

  }
}
</script>

<style scoped>

</style>
